<template>
  <view>
    <!-- 活动的详情页面 -->
    <view class="top">
      <view class="detail">
        <view class="state">
          <u-tag text="规划中" v-if="activityDetail.state"></u-tag>
          <u-tag text="已结束" type="warning" v-else></u-tag>
        </view>
        <view class="location">
          {{activityDetail.title}}
        </view>
        <view class="luncher">
          <u-icon name="map-fill"></u-icon>
          {{activityDetail.launcher}}
        </view>
        <view class="time_sum">
          <span>#ID:{{activityDetail.activityId}}#</span>
          <span id="sum">#报名人数：{{activityDetail.people}}#</span>
        </view>
      </view>
    </view>
    <u-divider text="详情"></u-divider>

    <view class="timespan">
      <view class="timetop">
        时间范围
      </view>
      <view class="timeitem">
        <view class="registion">
          <span>注册时间</span>
          <span class="time">{{activityDetail.registrationTime}} </span>
        </view>
        <view class="activityspan">
          <span>活动时间</span>
          <span class="time">{{activityDetail.time}}</span>
        </view>
      </view>
    </view>
    <u-divider></u-divider>
    <view class="detail">
      <view class="detail-top">
        活动内容
      </view>
      <view class="text">
        {{activityDetail.detail}}
      </view>
    </view>

    <u-divider></u-divider>
    <view class="detail">
      <view class="detail-top">
        活动请假
      </view>
      <view class="text">
        不支持
      </view>
    </view>

    <u-divider></u-divider>
    <view class="bottom">
      <view class="querry" @click="querry">
        咨询
      </view>
      <view class="enroll" @click="enroll">
        报名
      </view>
    </view>
    <!-- 咨询的弹出层 -->
    <u-popup :show="show" @close="close" mode="center" :round="10">
      <view class="popupquerry">
        <u-icon size="24" name="phone-fill"></u-icon>
        <text>电话:081-822257</text>
      </view>
    </u-popup>

    <!-- 报名弹出层 -->
    <u-popup :show="open" mode="bottom" :round="20" @close="close">
      <view class="popupenrrol">
        <view class="headline">
          报名活动
        </view>
        <!-- 内容区域 -->
        <view class="tip">
          <text>我们在收到申请后，会立即回复用户，如果成功参加，将不在退出，请问是否继续加入改活动？</text>
        </view>

        <view class="registionbox">
          <view class="cancel" @click="close">
            取消
          </view>
          <view class="ok" @click="submit">
            提交
          </view>
        </view>

      </view>
    </u-popup>
  </view>
</template>

<script>
  import {
    mapMutations
  } from "vuex"
  export default {
    data() {
      return {
        // 活动的唯一id
        activityId: "",
        activityDetail: {},
        show: false,
        open: false,
        // 用户数据
        Id:9
      };
    },
    // 获取页面传递过来的参数值
    onLoad(e) {
      this.activityId = e.id;
      this.getActivity()
    },
    methods: {
      ...mapMutations('m_activityorder', ['updatelist']),
      // 根据活动的id查询活动详情
      async getActivity() {
      
        const {
          data: res
        } = await uni.$http.get('/activitys/' + this.activityId)
        if (res.code != 200) return uni.$showMsg(res.msg)
        this.activityDetail = res.data
        // console.log(this.activityDetail)
      },
      // 咨询的按钮
      querry() {
        this.show = true
      },
      // 报名的按钮
      enroll() {
        this.open = true
      },
      close() {
        this.show = false
        this.open = false
        // console.log('close');
      },
      // 提交活动
      async submit() {
        const data = {
          volunteerId :this.Id,
          activityId:this.activityId,
          time:this.activityDetail.time,
          volunteer:"罗春",
          title:this.activityDetail.title
        }
        // console.log(data)
        const {
          data: res
        } = await uni.$http.post('/reservation' ,data)
        if (res.code !== 200) return uni.$u.toast(res.msg)
        // this.updatelist(res.data[0])
        // console.log(res)
        uni.$showMsg("提交活动成功")
        this.close()
      }
    }
  }
</script>

<style lang="scss">
  .top {
    height: 200px;
    // background-image: url('https://img-qn.51miz.com/preview/element/00/01/05/28/E-1052800-57BA7D89.jpg');
    background-color: #ecf5ff;
    // background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    .detail {
      height: 62%;

      .state {
        display: flex;
        padding-left: 10px;
      }

      .location {
        padding-left: 10px;
        color: black;
        font-weight: 600;
        font-size: 16px;
        margin-top: 10px;
      }

      .luncher {
        display: flex;
        font-weight: 600;
        font-size: 16px;
        margin-top: 10px;
        padding-left: 10px;
        color: black;

      }

      .time_sum {
        margin-top: 10px;
        padding-left: 10px;
        font-weight: 600;

        #sum {
          margin-left: 60px;
        }
      }
    }

  }

  .timespan {
    padding: 0 10px;

    .timetop {
      height: 50px;
      line-height: 50px;
      font-size: 20px;
      font-weight: 500;
    }

    .registion {
      margin-bottom: 10px;
      display: flex;
      justify-content: space-around;
    }

    .activityspan {
      display: flex;
      justify-content: space-around;
    }
  }

  .detail {
    padding: 0 10px;

    .detail-top {
      height: 50px;
      line-height: 50px;
      font-size: 20px;
      font-weight: 500;
    }

    .text {
      padding: 0 10px;

    }
  }

  .bottom {
    border-top: 1px solid #ceccca;
    height: 70px;
    display: flex;
    position: sticky;
    bottom: 0;
    width: 100%;

    .querry {
      flex: 1;
      border-right: 1px solid #ceccca;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: white;
    }

    .enroll {
      display: flex;
      align-items: center;
      flex: 1;
      justify-content: center;
      background-color: #f4f4f5;
    }
  }

  .popupquerry {
    height: 50px;
    width: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .popupenrrol {
    height: 200px;

    .headline {
      width: 100%;
      text-align: center;
      font-size: 24px;
      margin-top: 10px;
      color: #3c9cff;
    }

    .tip {
      padding: 0 10px;
      margin-top: 10px;
      text-indent: 2em;
    }

    .registionbox {
      border-top: 1px solid #ceccca;
      height: 70px;
      display: flex;
      position: fixed;
      bottom: 0;
      width: 100%;

      .cancel {
        flex: 1;
        border-right: 1px solid #ceccca;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: white;
      }

      .ok {
        display: flex;
        align-items: center;
        flex: 1;
        justify-content: center;
        background-color: #f4f4f5;
      }

    }
  }
</style>
